<template>
  <div class="container">
    <!-- 文案编辑区 -->
    <div class="editor-section">
      <h2>视频文案编辑</h2>
      <el-input
        v-model="videoScript"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8 }"
        placeholder="请输入视频文案"
        class="script-textarea"
      />
      <div class="btn-group">
        <el-button type="primary" size="small" @click="saveScript">
          保存文案
        </el-button>
      </div>
    </div>

    <!-- 配音选择区 -->
    <div class="voice-section">
      <div class="section-header">
        <h2>配音选择</h2>
        <el-button type="text" @click="isVoiceTagsExpanded = !isVoiceTagsExpanded">
          {{ isVoiceTagsExpanded ? '收起' : '展开' }}
          <i :class="['el-icon-arrow-' + (isVoiceTagsExpanded ? 'up' : 'down')]"></i>
        </el-button>
      </div>

      <!-- 音色标签 -->
      <div v-show="isVoiceTagsExpanded" class="voice-tags">
        <el-tag
          v-for="tag in voiceTags"
          :key="tag.id"
          :type="selectedVoiceTags.includes(tag.id) ? 'primary' : ''"
          class="voice-tag"
          @click="toggleVoiceTag(tag.id)"
        >
          {{ tag.name }}
        </el-tag>
      </div>

      <!-- 音色卡片 -->
      <div class="voice-cards">
        <div
          v-for="voice in filteredVoices"
          :key="voice.id"
          :class="{ 'selected-voice': selectedVoices.includes(voice.id) }"
          class="voice-card"
        >
          <div class="voice-tags">
            <el-tag
              v-for="tagId in voice.tags"
              :key="tagId"
              size="small"
              class="voice-tag"
            >
              {{ getTagName(tagId) }}
            </el-tag>
          </div>
          <h3>{{ voice.name }}</h3>
          <audio :src="voice.sampleAudio" controls class="audio-player" />
          <el-checkbox
            v-model="selectedVoices"
            :label="voice.id"
            class="voice-checkbox"
          />
        </div>
      </div>
    </div>

    <!-- 视频片段选择区 -->
    <div class="clip-section">
      <h2>视频片段选择</h2>
      <div class="clip-container-wrapper">
        <div ref="clipContainer" class="clip-container">
          <div
            v-for="clip in videoClips"
            :key="clip.id"
            :class="{ 'selected-clip': selectedClips.includes(clip.id) }"
            class="clip-item"
            @click="toggleClip(clip.id)"
          >
            <img :src="clip.thumbnail" :alt="clip.title" class="clip-thumbnail" />
            <div class="clip-info">
              <div class="clip-tags">
                <el-tag
                  v-for="tag in clip.tags"
                  :key="tag"
                  size="small"
                  class="clip-tag"
                >
                  {{ tag }}
                </el-tag>
              </div>
              <p class="clip-script">{{ clip.script }}</p>
            </div>
          </div>
        </div>
        <button class="scroll-button left" @click="scrollClips('left')">
          <i class="el-icon-arrow-left"></i>
        </button>
        <button class="scroll-button right" @click="scrollClips('right')">
          <i class="el-icon-arrow-right"></i>
        </button>
      </div>
    </div>

    <!-- 生成控制区 -->
    <div class="generate-section">
      <div class="generate-controls">
        <h2>生成设置</h2>
        <div class="controls-right">
          <span>生成数量：</span>
          <el-input-number
            v-model="generateCount"
            :min="1"
            :max="10"
            size="small"
          />
          <el-button
            type="primary"
            :disabled="!canGenerate"
            @click="generateVideos"
          >
            生成视频
          </el-button>
        </div>
      </div>

      <!-- 生成结果展示 -->
      <div v-if="generatedVideos.length" class="results-grid">
        <div v-for="video in generatedVideos" :key="video.id" class="video-item">
          <video :src="video.url" controls class="video-player" />
          <div class="video-footer">
            <span>{{ video.title }}</span>
            <el-button type="primary" size="small">下载</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoScript: '这是一段示例视频文案，支持实时编辑和保存。您可以在这里输入您的创意文案。',
      isVoiceTagsExpanded: true,
      selectedVoiceTags: [],
      selectedVoices: [],
      selectedClips: [],
      generateCount: 1,
      // 数据部分
      voiceTags: [
        { id: 1, name: '男声' },
        { id: 2, name: '女声' },
        { id: 3, name: '童声' },
        { id: 4, name: '中年' },
        { id: 5, name: '老年' },
        { id: 6, name: '温柔' },
        { id: 7, name: '活力' },
        { id: 8, name: '磁性' },
      ],
      voices: [
        {
            id: 1,
            name: '温柔女声',
            tags: [2, 6],
            sampleAudio: 'https://example.com/audio1.mp3',
          },
          {
            id: 2,
            name: '磁性男声',
            tags: [1, 8],
            sampleAudio: 'https://example.com/audio2.mp3',
          },
          {
            id: 3,
            name: '活力少年',
            tags: [3, 7],
            sampleAudio: 'https://example.com/audio3.mp3',
          },
          {
            id: 4,
            name: '成熟男声',
            tags: [1, 4],
            sampleAudio: 'https://example.com/audio4.mp3',
          },
      ],
      videoClips: [
        {
            id: 1,
            title: '片段1',
            thumbnail: 'https://ai-public.mastergo.com/ai/img_res/e7f16c937614fc107246ee4641b6abcc.jpg',
            script: '这是第一个视频片段的文案内容，展示了产品的主要特点。',
            tags: ['开场', '产品展示'],
          },
          {
            id: 2,
            title: '片段2',
            thumbnail: 'https://ai-public.mastergo.com/ai/img_res/230567944576aa99fe673ca1bcfd42a2.jpg',
            script: '第二个片段展示了产品的使用方法和效果。',
            tags: ['教程', '效果展示'],
          },
          {
            id: 3,
            title: '片段3',
            thumbnail: 'https://ai-public.mastergo.com/ai/img_res/356540557b9e0b78c7839062b96a6e68.jpg',
            script: '第三个片段包含了用户的真实使用反馈。',
            tags: ['用户反馈', '体验分享'],
          },
          {
            id: 4,
            title: '片段4',
            thumbnail: 'https://ai-public.mastergo.com/ai/img_res/48b2077547f9baa7fe4582df450b4276.jpg',
            script: '最后一个片段是精彩的总结部分。',
            tags: ['总结', '高光时刻'],
          },
      ],
      generatedVideos: [
        {
            id: 1,
            title: '成品视频 1',
            url: 'https://example.com/video1.mp4',
          },
          {
            id: 2,
            title: '成品视频 2',
            url: 'https://example.com/video2.mp4',
          },
      ]
    }
  },
  computed: {
    filteredVoices() {
      if (this.selectedVoiceTags.length === 0) return this.voices;
      return this.voices.filter(voice => 
        voice.tags.some(tag => this.selectedVoiceTags.includes(tag))
      );
    },
    canGenerate() {
      return this.selectedVoices.length > 0 && this.selectedClips.length > 0
    }
  },
  methods: {
    getTagName(tagId) {
      const tag = this.voiceTags.find(t => t.id === tagId);
      return tag ? tag.name : '';
    },
    toggleVoiceTag(tagId) {
      const index = this.selectedVoiceTags.indexOf(tagId);
      if (index === -1) {
        this.selectedVoiceTags.push(tagId);
      } else {
        this.selectedVoiceTags.splice(index, 1);
      }
    },
    toggleClip(clipId) {
      const index = this.selectedClips.indexOf(clipId);
      if (index === -1) {
        this.selectedClips.push(clipId);
      } else {
        this.selectedClips.splice(index, 1);
      }
    },
    scrollClips(direction) {
      const container = this.$refs.clipContainer;
      if (!container) return;
      const scrollAmount = 300;
      container.scrollTo({
        left: direction === 'left' 
          ? container.scrollLeft - scrollAmount 
          : container.scrollLeft + scrollAmount,
        behavior: 'smooth'
      });
    },
    saveScript() {
      // 保存文案逻辑
    },
    generateVideos() {
      // 生成视频逻辑
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

.editor-section,
.voice-section,
.clip-section,
.generate-section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.script-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.btn-group {
  margin-top: 1rem;
  text-align: right;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.voice-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.voice-tag {
  cursor: pointer;
  border-radius: 16px;
  padding: 0 12px;
}

.voice-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.voice-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  transition: all 0.3s;
}

.voice-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.selected-voice {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,.2);
}

.audio-player {
  width: 100%;
  margin-top: 0.5rem;
}

.voice-checkbox {
  position: absolute;
  right: 8px;
  top: 8px;
}

.clip-container-wrapper {
  position: relative;
}

.clip-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
}

.clip-item {
  flex: 0 0 240px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.clip-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.selected-clip {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,.2);
}

.clip-thumbnail {
  width: 100%;
  height: 128px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.clip-info {
  padding: 0.75rem;
}

.clip-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.clip-script {
  font-size: 0.875rem;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
}

.scroll-button.left {
  left: -16px;
}

.scroll-button.right {
  right: -16px;
}

.generate-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.controls-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.video-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 1rem;
}

.video-player {
  width: 100%;
  height: 192px;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.video-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>